<template>
  <el-container class="main-draw">
    <el-header>
      <el-row class="tool-bar">
        <el-dropdown style="margin-right:10px;padding-top: 6px;">
          <span class="el-dropdown-link">
            <i class="el-icon-more"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item id="newNode"  @click.native ="addTab('icon','tl','#eee')">新建图标</el-dropdown-item>
            <el-dropdown-item id="newGraph" @click.native ="addTab('graph','tl','#fff')">新建图纸</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span :class="{ active: isHide }">
          <el-button  @click ="addShape('node','customRect')">矩形</el-button>
          <!--<el-button id="addRhombus" @click ="addShape('node','rhombus')">菱形</el-button>-->
          <el-button  @click ="addShape('node','customCircle')">圆</el-button>
          <el-button  @click ="addShape('node','customFan')">扇形</el-button>
          <el-button  @click ="addShape('node','customTriangle')">三角形</el-button>
          <el-button  @click ="addShape('node','customImage')">自定义图片</el-button>
          <el-button  @click ="addShape('node','customText')">添加文本</el-button>
          <el-button  @click ="addShape('edge','line')">添加直线</el-button>
          <el-button  @click ="addShape('edge','smooth')">添加曲线</el-button>
          <el-button  @click ="changeMode('drag')" class="el-icon-rank"></el-button>
          <el-button  @click ="changeMode('edit')" class="el-icon-edit-outline"></el-button>
          <!--<el-button  @click ="saveNodeData" class="el-icon-circle-check">保存节点</el-button>-->
          <el-button  @click ="setName" class="el-icon-circle-check">保存节点</el-button>
          <!--<el-button  @click="createNode">生成节点</el-button>-->
        </span>
      </el-row>
    </el-header>
    <el-aside class="left-tool left-panel">
      <div class="file-box">
        <div v-for="(value,index) in fileArr" :key="index" @click.prevent="onDragStart(index)"  @dblclick.prevent="onEdit(index)" class="file-item">
          <img :src="value.img" width="60" />
          <p>{{ value.title }}</p>
        </div>
      </div>
    </el-aside>
    <el-main id="mountNode"  class="draw-panel">
      <el-tabs v-model="editableTabsValue"  type="card" closable @tab-remove="removeTab"  @tab-click="tset">
        <el-tab-pane
          v-for="(item, index) in editableTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
        >
        </el-tab-pane>
      </el-tabs>
    </el-main>
    <el-aside class="right-board right-panel">
      <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm" >
        <el-row v-for = "(value,index) in ruleForm.dataModels"  class="value-block" :id="value.model.id" :key="index">
          <div style="padding: 10px;">
            <el-form-item :label="'ID'">
              <el-input v-model="value.model.id" :disabled="true" ></el-input>
            </el-form-item>
            <el-form-item :label="'节点名称'">
              <el-input v-model="value.title"  @change="changeStyle(index)"></el-input>
            </el-form-item>
            <!--文本属性-->
            <template v-if="value.shape === 'customText'">
              <el-form-item :label="'显示文本'"  >
                <el-input v-model="value.label" @change="changeLabel(index)"></el-input>
              </el-form-item>
              <el-form-item :label =" '字体颜色'">
                <el-color-picker v-model="value.color" show-alpha  @change="changeLabel(index)"></el-color-picker>
              </el-form-item>
              <el-form-item :label =" '字体大小'">
                <el-input-number v-model="value.fontSize" @change="changeLabel(index)"></el-input-number>
              </el-form-item>
              <el-form-item :label = " '字体粗细'">
                <el-input-number v-model="value.fontWeight" :min="100" :max="900" :step="100" @change="changeLabel(index)"></el-input-number>
              </el-form-item>
            </template>
            <el-form-item :label="'形状'">
              <el-select v-model="value.shape" placeholder="请选择"  :disabled="true">
                <el-option
                  v-for="item in shape"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="'图片源'" v-if="value.shape === 'customImage'">
              <el-input v-model="value.img"></el-input>
            </el-form-item>
            <!--文本框不支持属性-->
            <template v-if="value.shape != 'customText'">
                <template v-if="value.shape != 'customImage'">
                  <el-form-item :label="'边框颜色'">
                    <el-color-picker v-model="value.strColor" show-alpha  @change="changeStyle(index)"></el-color-picker>
                  </el-form-item>
                  <el-form-item :label="'填充颜色'">
                    <el-color-picker v-model="value.fillColor" show-alpha  @change="changeStyle(index)"></el-color-picker>
                  </el-form-item>
                  <el-form-item :label="'边框厚度'" >
                    <el-input-number  v-model.number="value.model.lineWidth" :min="1"  @change="changeStyle(index)"   >
                    </el-input-number>
                  </el-form-item>
                  <el-form-item :label="'边框弧度'"  v-if="value.shape =='customRect'">
                    <el-input-number  v-model.number="value.model.nodeRadius"  :min="0"  @change="changeStyle(index)"></el-input-number>
                  </el-form-item>
                </template>
              <el-form-item :label="'宽'" >
                <el-input-number  v-model.number="value.size[0]"  :min="1"  @change="changeStyle(index)"></el-input-number>
              </el-form-item>
              <!--扇形和三角形不支持高-->
              <template v-if="value.shape != 'customFan'">
                <el-form-item :label="'高'" v-if="value.shape != 'customTriangle'">
                  <el-input-number  v-model.number="value.size[1]" :min="1" @change="changeStyle(index)"></el-input-number>
                </el-form-item>
              </template>
            </template>
            <el-form-item :label="'旋转角度'" >
              <el-input-number  v-model.number="value.model.nodeRotate"   @change="changeStyle(index)"></el-input-number>
            </el-form-item>
            <el-form-item :label="'X'" >
              <el-input-number  v-model.number="value.model.x" :min="0"   @change="changeStyle(index)"></el-input-number>
            </el-form-item>
            <el-form-item :label="'Y'" >
              <el-input-number  v-model.number="value.model.y" :min="0"  @change="changeStyle(index)"></el-input-number>
            </el-form-item>
            <!--扇形特有属性-->
            <template v-if="value.shape == 'customFan'">
              <el-form-item :label="'开始角'">
                <el-input-number v-model="value.model.startAngle" :min="0" :max="2" :step="0.01" @change="changeStyle(index)"  ></el-input-number>
              </el-form-item>
              <el-form-item :label="'结束角'">
                <el-input-number v-model="value.model.endAngle" :min="0.15" :max="2" :step="0.01" @change="changeStyle(index)"></el-input-number>
              </el-form-item>
              <el-form-item :label="'内半径'">
                <el-input-number v-model="value.model.rs" :min="0"  :max="value.size[0]/2" @change="changeStyle(index)"></el-input-number>
              </el-form-item>
            </template>
          </div>
        </el-row>
      </el-form>
    </el-aside>
  </el-container>
</template>
<script>
  import G6 from '@antv/g6';
  import html2canvas from 'html2canvas';
  import { defaultConfig,formatShape,judgeShape,keyboard }  from  '../assets/js/common';
  import '../assets/css/jquery.ui.ruler.css';
  import '../assets/js/plugin/jquery-ui.min';
  import '../assets/js/plugin/jquery.ui.ruler';
  const Util = G6.Util;
  export default {
    name:'editer',
    data () {
      return {
        ruleForm: {
          dataModels:[
          ],
        },
        shape:[
          {
            value: 'customRect',
            label: '矩形'
          },
          {
            value: 'customCircle',
            label: '圆'
          },
          {
            value: 'customFan',
            label: '扇形'
          },
          {
            value: 'customTriangle',
            label: '三角形'
          },
          {
            value: 'customText',
            label: '文本'
          },
          {
            value: 'customImage',
            label: '自定义图片'
          }
        ],
        net:'',
        authorPoints:[
          [0, 0.25, {
            // 锚点图形属性
            style: {
              fill: 'red',
              fillOpacity: 0.7
            },
            // 悬浮锚点图形属性
            hoverStyle: {
              stroke: '#000'
            },
            // 是否可以连接
            linkable: false
          }],
          [0, 0.5],
          [0, 0.75],
          [1, 0.25],
          [1, 0.5],
          [1, 0.75],
          [0.25, 0],
          [0.5, 0],
          [0.75, 0],
          [0.25, 1],
          [0.5, 1],
          [0.75, 1]
        ],
        fileArr:[
          {img:"",
            source: {
              nodes: [
                {
                  "shape": "customRect",
                  "x": 170,
                  "y": 170,
                  "id": "a7f544fe",
                  "lineWidth": 1,
                  "nodeRotate": 0,
                  "nodeRadius": 0,
                  "size": [
                    175.5,
                    164.5
                  ],
                  "strColor": "rgba(218, 214, 214, 1)",
                  "fillColor": "rgba(217, 212, 212, 1)"
                },
                {

                  "shape": "customCircle",
                  "x": 258,
                  "y": 170,
                  "id": "c61110b2",
                  "lineWidth": 1,
                  "size": [
                    175.625,
                    53.375
                  ],
                  "strColor": "rgba(200, 195, 195, 1)",
                  "fillColor": "rgba(200, 195, 195, 1)"
                },
                {
                  "shape": "customFan",
                  "x": 290,
                  "y": 153,
                  "id": "2c57a19a",
                  "lineWidth": 1,
                  "nodeRotate": 0,
                  "startAngle": 0.92,
                  "endAngle": 0.98,
                  "rs": 45,
                  "strColor": "rgba(252, 252, 252, 0.48)",
                  "fillColor": "#fff",
                  "size": [
                    225,
                    0
                  ]
                },
                {
                  "shape": "customFan",
                  "x": 260,
                  "y": 130,
                  "id": "91b380c5",
                  "lineWidth": 1,
                  "nodeRotate": 0,
                  "startAngle": 0.19,
                  "endAngle": 0.81,
                  "rs": 30.656227634233915,
                  "strColor": "rgba(106, 105, 105, 0.73)",
                  "fillColor": "rgba(106, 105, 105, 1)",
                  "size": [
                    75.31245526846783,
                    0
                  ]
                },
                {
                  "shape": "customCircle",
                  "x": 260,
                  "y": 150,
                  "id": "95a385cc",
                  "lineWidth": 1,
                  "size": [
                    63.5,
                    20
                  ],
                  "strColor": "rgba(220, 216, 216, 1)",
                  "fillColor": "rgba(230, 227, 227, 1)"
                },
                {
                  "shape": "customCircle",
                  "x": 342,
                  "y": 446,
                  "id": "6fa2ef12",
                  "lineWidth": 1,
                  "size": [
                    15,
                    7
                  ],
                  "strColor": "rgba(237, 132, 21, 1)",
                  "fillColor": "rgba(237, 132, 21, 1)"
                },
                {
                  "shape": "customCircle",
                  "x": 253,
                  "y": 486,
                  "id": "3556c334",
                  "lineWidth": 1,
                  "size": [
                    15,
                    7
                  ],
                  "strColor": "rgba(237, 132, 21, 1)",
                  "fillColor": "rgba(237, 132, 21, 1)"
                },
                {
                  "shape": "customCircle",
                  "x": 172,
                  "y": 446,
                  "id": "e1f1d4aa",
                  "lineWidth": 1,
                  "size": [
                    15,
                    7
                  ],
                  "strColor": "rgba(237, 132, 21, 1)",
                  "fillColor": "rgba(237, 132, 21, 1)"
                },
                {
                  "shape": "customRect",
                  "x": 170,
                  "y": 330,
                  "id": "6d84b586",
                  "lineWidth": 1,
                  "nodeRotate": 0,
                  "nodeRadius": 2,
                  "size": [
                    5.5,
                    115
                  ],
                  "strColor": "rgba(217, 212, 212, 1)",
                  "fillColor": "rgba(217, 212, 212, 1)"
                },
                {
                  "shape": "customRect",
                  "x": 254,
                  "y": 416,
                  "id": "6fc70aca",
                  "lineWidth": 1,
                  "nodeRotate": 113,
                  "nodeRadius": 2,
                  "size": [
                    5.5,
                    88
                  ],
                  "strColor": "rgba(217, 212, 212, 1)",
                  "fillColor": "rgba(217, 212, 212, 1)"
                },
                {
                  "shape": "customRect",
                  "x": 214,
                  "y": 362,
                  "id": "7cce845e",
                  "lineWidth": 1,
                  "nodeRotate": 67,
                  "nodeRadius": 0,
                  "size": [
                    5.5,
                    47.71735021375878
                  ],
                  "strColor": "rgba(217, 212, 212, 1)",
                  "fillColor": "rgba(217, 212, 212, 1)"
                },
                {
                  "shape": "customRect",
                  "x": 345,
                  "y": 370,
                  "id": "89dba4b8",
                  "lineWidth": 1,
                  "nodeRotate": 2,
                  "nodeRadius": 2,
                  "size": [
                    5.5,
                    26
                  ],
                  "strColor": "rgba(217, 212, 212, 1)",
                  "fillColor": "rgba(217, 212, 212, 1)"
                },
                {
                  "shape": "customRect",
                  "x": 344,
                  "y": 371,
                  "id": "635104d9",
                  "lineWidth": 1,
                  "nodeRotate": 64,
                  "nodeRadius": 2,
                  "size": [
                    5.5,
                    104
                  ],
                  "strColor": "rgba(217, 212, 212, 1)",
                  "fillColor": "rgba(217, 212, 212, 1)"
                },
                {
                  "shape": "customFan",
                  "x": 259,
                  "y": 293,
                  "id": "053d3fb8",
                  "lineWidth": 1,
                  "nodeRotate": 0,
                  "startAngle": 0.17,
                  "endAngle": 0.86,
                  "rs": 75,
                  "strColor": "rgba(187, 184, 184, 1)",
                  "fillColor": "rgba(187, 184, 184, 1)",
                  "size": [
                    195,
                    0
                  ]
                },
                {
                  "shape": "customCircle",
                  "x": 258,
                  "y": 330,
                  "id": "6cd2fbb1",
                  "lineWidth": 1,
                  "size": [
                    175,
                    86
                  ],
                  "strColor": "rgba(217, 212, 212, 1)",
                  "fillColor": "rgba(217, 212, 212, 1)"
                },
                {
                  "shape": "customRect",
                  "x": 340,
                  "y": 330,
                  "id": "0ac2120c",
                  "lineWidth": 1,
                  "nodeRotate": 0,
                  "nodeRadius": 2,
                  "size": [
                    5.5,
                    115
                  ],
                  "strColor": "rgba(217, 212, 212, 1)",
                  "fillColor": "rgba(217, 212, 212, 1)"
                },
                {
                  "shape": "customRect",
                  "x": 250,
                  "y": 370,
                  "id": "097db873",
                  "lineWidth": 1,
                  "nodeRotate": 0,
                  "nodeRadius": 2,
                  "size": [
                    5.5,
                    115
                  ],
                  "strColor": "rgba(217, 212, 212, 1)",
                  "fillColor": "rgba(217, 212, 212, 1)"
                }
              ],
              edges: [],
            },
            title:"水塔"
          },
          { img:"",
            source:{
                nodes:[
                  {
                    "shape": "customCircle",
                    "x": 370,
                    "y": 590,
                    "id": "641533b4",
                    "lineWidth": 1,
                    "nodeRotate": 0,
                    "size": [
                      161,
                      42
                    ],
                    "strColor": "rgba(208, 204, 204, 1)",
                    "fillColor": "rgba(228, 225, 225, 1)"
                  },
                  {
                    "shape": "customRect",
                    "x": 288,
                    "y": 395,
                    "id": "b233a7ea",
                    "lineWidth": 1,
                    "nodeRadius": 17,
                    "nodeRotate": 0,
                    "size": [
                      165,
                      187
                    ],
                    "strColor": "rgba(208, 203, 203, 1)",
                    "fillColor": "rgba(208, 203, 203, 1)"
                  },
                  {
                    "shape": "customCircle",
                    "x": 370,
                    "y": 570,
                    "id": "37355d85",
                    "lineWidth": 1,
                    "nodeRotate": 0,
                    "size": [
                      163,
                      51
                    ],
                    "strColor": "rgba(193, 189, 189, 1)",
                    "fillColor": "rgba(193, 189, 189, 1)"
                  },
                  {
                    "shape": "customCircle",
                    "x": 370,
                    "y": 400,
                    "id": "2574f272",
                    "lineWidth": 1,
                    "nodeRotate": 0,
                    "size": [
                      166,
                      47
                    ],
                    "strColor": "rgba(200, 195, 195, 1)",
                    "fillColor": "rgba(200, 195, 195, 1)"
                  },
                  {
                    "shape": "customCircle",
                    "x": 370,
                    "y": 391,
                    "id": "95c7c3ea",
                    "lineWidth": 1,
                    "nodeRotate": 0,
                    "size": [
                      170,
                      32
                    ],
                    "strColor": "rgba(208, 204, 204, 1)",
                    "fillColor": "rgba(228, 225, 225, 1)"
                  }
                ],
            },
            title:"bottle"
          },
          {img:"",
            source:{
              nodes: [
                {
                  "shape": "customTriangle",
                  "x": 539,
                  "y": 498,
                  "id": "477c7374",
                  "lineWidth": 1,
                  "nodeRotate": 0,
                  "size": [
                    134,
                    0
                  ],
                  "strColor": "rgba(122, 121, 121, 1)",
                  "fillColor": "rgba(164, 163, 163, 1)"
                },
                {
                  "shape": "customRect",
                  "x": 453,
                  "y": 377,
                  "id": "d6def9b1",
                  "lineWidth": 1,
                  "nodeRadius": 13,
                  "nodeRotate": 0,
                  "size": [
                    170,
                    170
                  ],
                  "strColor": "rgba(139, 136, 136, 1)",
                  "fillColor": "rgba(190, 186, 186, 1)"
                },
                {
                  "shape": "customCircle",
                  "x": 540,
                  "y": 460,
                  "id": "bcbe1663",
                  "lineWidth": 1,
                  "nodeRotate": 0,
                  "strColor": "rgba(252, 249, 249, 1)",
                  "fillColor": "rgba(255, 255, 255, 1)",
                  "size": [
                    150,
                    150
                  ]
                },
                {
                  "shape": "customFan",
                  "x": 535,
                  "y": 461,
                  "id": "22e45d6c",
                  "lineWidth": 1,
                  "nodeRotate": 256,
                  "startAngle": 0.26,
                  "endAngle": 0.56,
                  "rs": 11,
                  "size": [
                    163,
                    0
                  ],
                  "strColor": "rgba(143, 142, 142, 1)",
                  "fillColor": "rgba(171, 168, 168, 1)"
                },
                {
                  "shape": "customFan",
                  "x": 537,
                  "y": 460,
                  "id": "7ad9b84f",
                  "lineWidth": 1,
                  "nodeRotate": 33,
                  "startAngle": 0.26,
                  "endAngle": 0.56,
                  "rs": 11,
                  "size": [
                    163,
                    0
                  ],
                  "strColor": "rgba(143, 142, 142, 1)",
                  "fillColor": "rgba(171, 168, 168, 1)"
                },
                {
                  "shape": "customFan",
                  "x": 539,
                  "y": 461,
                  "id": "ab349e9e",
                  "lineWidth": 1,
                  "nodeRotate": 105,
                  "startAngle": 0.26,
                  "endAngle": 0.56,
                  "rs": 11,
                  "size": [
                    163,
                    0
                  ],
                  "strColor": "rgba(143, 142, 142, 1)",
                  "fillColor": "rgba(171, 168, 168, 1)"
                },
                {
                  "shape": "customFan",
                  "x": 538,
                  "y": 462,
                  "id": "7a4c2fdf",
                  "lineWidth": 1,
                  "nodeRotate": 180,
                  "startAngle": 0.26,
                  "endAngle": 0.56,
                  "rs": 11,
                  "size": [
                    163,
                    0
                  ],
                  "strColor": "rgba(143, 142, 142, 1)",
                  "fillColor": "rgba(171, 168, 168, 1)"
                },
                {
                  "shape": "customFan",
                  "x": 535,
                  "y": 460,
                  "id": "ab148dd1",
                  "lineWidth": 1,
                  "nodeRotate": 324,
                  "startAngle": 0.26,
                  "endAngle": 0.56,
                  "rs": 11,
                  "size": [
                    163,
                    0
                  ],
                  "strColor": "rgba(143, 142, 142, 1)",
                  "fillColor": "rgba(171, 168, 168, 1)"
                }
              ],
            },
            title:"风扇"
          },
          {img:"",
            source:{
              nodes:[
                {
                  "shape": "customCircle",
                  "x": 408,
                  "y": 545,
                  "id": "6176a7e1",
                  "lineWidth": 1,
                  "size": [
                    201.875,
                    41.875
                  ],
                  "strColor": "rgba(0, 0, 0, 0.32)",
                  "fillColor": "#fff"
                },
                {
                  "shape": "customRect",
                  "x": 386,
                  "y": 484,
                  "id": "6174ca73",
                  "lineWidth": 1,
                  "nodeRotate": 0,
                  "nodeRadius": 0,
                  "size": [
                    38.1875,
                    52.25
                  ],
                  "strColor": "rgba(0, 0, 0, 0.24)",
                  "fillColor": "#fff"
                },
                {
                  "shape": "customRect",
                  "x": 310,
                  "y": 140,
                  "id": "7130e55d",
                  "lineWidth": 1,
                  "nodeRotate": 0,
                  "nodeRadius": 95,
                  "size": [
                    193.25,
                    370.5
                  ],
                  "strColor": "rgba(0, 0, 0, 0.31)",
                  "fillColor": "#fff"
                },
                {
                  "shape": "customCircle",
                  "x": 408,
                  "y": 270,
                  "id": "ec477530",
                  "lineWidth": 12,
                  "size": [
                    123.5,
                    122.5
                  ],
                  "strColor": "#000",
                  "fillColor": "rgba(10, 10, 10, 0.93)"
                },
                {
                  "shape": "customCircle",
                  "x": 423,
                  "y": 260,
                  "id": "88f991d3",
                  "lineWidth": 1,
                  "size": [
                    14.25,
                    14.25
                  ],
                  "strColor": "#000",
                  "fillColor": "#fff"
                }
              ]
            },
            title:"camera"
          },
        ],
        treeData: [{
          label: '图标根目录',
          children: [
          {
            label: 'basics',
          },
            {
                label:'demo',
            }
          ]
        },],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        source: {
          nodes: [
          ],
          edges: [],
        },
        isHide:true,
        editableTabsValue: '0',
        editableTabs: [],
        tabIndex: 2
      }
    },
    computed:{

    },
    mounted(){
      //this.initDraw('tl',null);
      //this.net.destroy(); // 销毁画布
    },
    methods: {
      /**
       * 添加选项卡
       *   type    类型(icon，graph)
       *   fitView 图形位置
       *   bgColor 画布颜色
       *   file    图标数组（img地址，source数组，title 图标名称）
       */
      addTab(type,fitView,bgColor,file) {
        let fileData = file || '';
        let fileName = fileData.title || '未命名';
        let newTabName = ++this.tabIndex + '';
        this.editableTabs.push({
          title: type === 'icon'? fileName +'-图标': fileName +'-图纸',
          name: newTabName,
        });
        this.editableTabsValue = newTabName;
        this.$nextTick(()=>{
          this.createNew(type,fitView,bgColor,fileData.source);
        });
      },
      // 移除选项卡
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      },
      tset(v){
        this.editableTabsValue = v.name;
        console.log(this.editableTabsValue);
      },
      /**
       * 图编辑器
       * param(type)    icon,graph
       * param(fitView) 图形显示位置 cc 默认居中 tl 左上
       * param(grid)    bool arr null 网格样式
       */
      initDraw(type,fitView,grid){
        const _this =this;
        // 默认生成现有图形节点
        _this.shape.forEach((item)=>{
          let s = formatShape(item.value);
          G6.registerNode(item.value, {
            // 绘制
            draw(cfg, group) {
              defaultConfig(cfg);  //设置节点默认属性
              const shape = judgeShape(s,cfg,group); //根据形状绘制
              _this.changeModel(cfg); // 更新form数据
              return shape;
            },
          });
        })

        // 初始化net
        _this.net = new G6.Net({
          id: 'pane-'+ _this.editableTabsValue,      // 容器ID
          mode: 'edit',  // 编辑模式
          fitView: fitView || 'tl', // 自适应视口为左上
          height: window.innerHeight,    // 画布高
          grid: type == 'icon' ? null : grid || {
            forceAlign: true, // 是否支持网格对齐
            cell: 10,         // 网格大小
            line: {           // 网格线样式
              stroke: '#eee'
            }
          }
        });

        //设置节点默认属性
        _this.net.node()
          .size(function(obj){ //设置默认size
            switch(obj.shape)
            {
              case 'customRect':
                return [100,100]
                break;
              case 'customCircle':
                return [100,100]
                break;
              default:
                return [100,100]
            }
          })

        //渲染默认数据
        _this.net.source(_this.source);

        //节点事件
        _this.nodeEven();

        //渲染
        _this.net.render();

      },

      /**
       * 新建图标，图纸
       *   type    类型（icon，graph）
       *   fitView 图形位置
       *   bgColor 画布颜色
       *   source  图标数组
       */
      createNew(type,fitView,bgColor,source){
        this.source = source || ''; //默认source空
        $('#pane-'+ this.editableTabsValue).ruler();
        this.initDraw(type,fitView);
        this.isHide = false;
        this.net.get('container').style.background = bgColor;
      },

      /**
       * 添加节点图形
       * param(type) node,edge 节点或边
       * param(shape) customShape 自定义形状
       */
      addShape(type,shape){
        this.net.beginAdd(type, {
          shape: shape
        });
      },
      /**
       *  切换编辑模式
       *  param(mode) drag 拖拽模式 edit 编辑模式
       *  更多模式查看G6 API
       */
      changeMode(mode){
        this.net.changeMode(mode);
      },

      /**
       * 保存绘图数据
       */
      saveNodeData(){
        let data =  this.ruleForm.dataModels;
        const saveData = this.net.save();
        const json = JSON.stringify(saveData, null, 2);
        const source = saveData.source;
        // console.log(source.nodes,'source')
        source.nodes.forEach((item) =>{ // 设置默认属性
          let i = data.findIndex(obj => obj.model.id === item.id);
          item.size = item.size || data[i].size; // 默认size(宽高)
          item.fillColor = item.fillColor || data[i].fillColor; // 默认填充颜色
          item.strColor = item.strColor || data[i].strColor; // 默认描边
        });
        return source;
        // console.log(saveData, json); // eslint-disable-line no-console
      },

      /**
       * 节点事件
       */
      nodeEven(){
        // 画布右键事件
        this.net.on('contextmenu', ev => {

        })
        //画布点击事件
        this.net.on('click', ev => {
          const item = ev.item;
          let data = this.ruleForm.dataModels;
          // 如果点击节点，则可以执行键盘事件
          if(this.net.isNode(item)){
            let id = item.get('model').id;
            let i = data.findIndex(obj => obj.model.id === id );
            $('#'+id).show();
            $('#'+id).siblings().hide();
            // 删除数据
            keyboard(i,1,data);
          }
          else{
            // 否则删除0条数据
            keyboard(0,0,data);
          }
        })
      },

      /**
       * 节点文本样式修改
       * @param i
       */
      changeLabel(i){
        this.$nextTick(() => {
          let data = this.ruleForm.dataModels[i];
          const item = this.net.find(data.model.id)
          this.net.update(item , {
            label:data.label, //显示名称
            color:data.color, // 字体颜色
            fontSize:data.fontSize, // 字体大小
            fontWeight:data.fontWeight, //字体粗细
          })
          this.net.refresh()  //更新画布
        })
      },

      /**
       * 节点样式修改
       * @param i
       */
      changeStyle(i){
        this.$nextTick(() => {
          let data = this.ruleForm.dataModels[i];
          const item = this.net.find(data.model.id)
          this.net.update(item , {
            strColor:data.strColor, //描边颜色
            lineWidth:data.model.lineWidth, //边框厚度
            fillColor:data.fillColor, //填充色
            size:data.size, //宽高
            x :data.model.x, // x坐标
            y :data.model.y, // y坐标
            nodeRotate:data.model.nodeRotate, // 旋转角度
            nodeRadius:data.model.nodeRadius, //边框弧度
            circleR:data.circleR, //圆的半径
            startAngle:data.model.startAngle,  //扇形开始角
            endAngle:data.model.endAngle,  //扇形结束角
            rs:data.model.rs,  //扇形内半径
            title:data.title, // 节点名称
          })
          this.net.refresh() // 刷新网布
        })
      },

      /**
       * 节点数据更新
       * @param cfg  配置项数据
       * @param data 表单数据
       */
      changeModel(cfg){
        let data =  this.ruleForm.dataModels;
        let i = data.findIndex(obj => obj.model.id === cfg.model.id),
            l = data.length;
        if(l == 0 || i == -1 ){ //当前节点不存在
          data.push(cfg)
        }else{ //如果已存在 更新对应数据
            this.$set(data,i, cfg)
        }
        //console.log(data,'data');
        //console.log(this.source, 'change-source');
        keyboard(i,1,data); //键盘事件
      },


      /**
       * 保存当前图片,创建可拖拽节点
       * @param ()
       */
       saveImage(value) {
        let source = this.saveNodeData();
        var matrixStash = this.net.getMatrix(); // 缓存当前矩阵
        this.net.autoZoom(); // 图自动缩放以适应画布尺寸
        this.net.refresh();
        const mountNode = document.querySelector("#mountNode"); //节点拖入该容器
        const graphCanvas = document.querySelector("canvas"); // 被截图的canvas
        html2canvas(graphCanvas).then(canvas => {
            var dataURL = canvas.toDataURL('image/png');
            let file = this.fileArr;
            let i = file.findIndex(obj => obj.source.nodes[0].id === this.source.nodes[0].id), // 当前索引
                l = file.length ,
                objArr = {"img":dataURL.replace('image/png', 'image/octet-stream'), "title":value, "source":source};
            if(l == 0 || i == -1 ){ //当前节点不存在
              file.push(objArr)
            }else{ //如果已存在 更新对应数据
              this.$set(file,i, objArr)
            }
        })
          this.net.updateMatrix(matrixStash); // 还原矩阵
          this.net.refresh();
        },
        // 单击节点放入画布
        onDragStart(index) {
           console.log(index,'2');
           this.createNode(this.fileArr[index]); // 创建当前数据的节点
        },
        // 双击编辑节点
        onEdit(index){
          console.log(index,'1');
          let file = this.fileArr[index];
          this.addTab('icon','cc','#eee',file);
        },

      /**
       * 生成节点
       * @param   data fileArr 数组
       * @returns {*}
       */
      createNode(data){
        let _this = this;
        G6.registerNode(data.title, {
          draw(cfg, group) {
            defaultConfig(cfg)
            //遍历数组中的形状
             data.source.nodes.forEach((item,) => {
              let s = formatShape(item.shape);
              // 根据形状画不同图形
              judgeShape(s,item,group);
            });

            // 获取组属性
            let box = group.getBBox();
            // 创建外层形状
            const shape = group.addShape("rect", {
              attrs: {
                x: cfg.x || box.minX,
                y: cfg.y || box.minY,
                width: box.width,
                height: box.height,
              }
            });
            _this.changeModel(cfg);

            // 图组缩放
            let sx = cfg.size[0]/box.width;  //x轴缩放量 现宽度/原宽度
            let sy = cfg.size[1]/box.height; // y轴缩放量 现长度/原长度
            group.scale(sx,sy);

            return shape;
          },
        });
        // 双击图标节点时，默认图标模式可编辑节点， _this.net 为空
        if(_this.net){ // net已经渲染的情况下，需要判断图标模式和图纸模式
          //获取grid  图标模式时grid为空
          let gridType = _this.net.get('grid');
          // 图标模式下不允许使用自定义图标
          if(gridType !== null){
            console.log('if');
            //添加自定义图标节点
            _this.net.beginAdd('node', {
              shape: data.title
            });
          }else{
            this.$message({
              type: 'success',
              message: '自定义图形，请新建一个图纸'
            });
          }
        }
      },
      /**
       * 命名保存节点
       */
      setName() {
        let title;
        if(!this.source){
           this.source = this.saveNodeData();
           title = '';
        }else{
          let file = this.fileArr;
          let i = file.findIndex(obj => obj.source.nodes[0].id === this.source.nodes[0].id); // 当前索引
          title = file[i].title;
        }
        this.$prompt('请输入节点名称', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /\S/,
          inputValue: title, // 输入框的初始文本
          inputErrorMessage: '名称不能为空'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '节点名称是: ' + value
          });
          this.saveImage(value); //存为图片
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },

    }
  }
</script>
<style>
  ::-webkit-scrollbar{display:none;}
  html,body{overflow:hidden;margin: 0;}
  .tool-bar{
    z-index: 10;
    padding:5px 0px 10px 15px;
    background-color: #5b5b5b;
  }
  .tool-bar .active{
    display: none;
  }
  .el-header{
    padding: 0;
    height:40px !important;
    border-bottom: 1px solid #000000;
  }
  .el-tabs,.el-tabs__content,.el-tab-pane{
    height: -webkit-fill-available;
    width: -webkit-fill-available;
  }
  .graph-container{
    height: -webkit-fill-available;
    width: -webkit-fill-available;
  }
  .left-tool{
    left: 0;
    background: #f2f2f2;
    border-right: 1px solid #f1f1f1;
  }
  .draw-panel{
    position: absolute;
    left: 300px;
    right: 300px;
    top:40px;
    height: 100%;
    background-color: #363636;
  }
  .el-tabs--card>.el-tabs__header .el-tabs__nav, {
    border: 1px solid #555 !important;
  }
  .el-tabs--card>.el-tabs__header{
    border-bottom: 1px solid #555 !important;
  }
  .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
    border-bottom-color: #888;
  }
  .right-board{
    right:0;
    background:#5b5b5b;
    border-left: 1px solid #000;
  }
  .left-panel,.right-panel{
    position: absolute;
    top: 40px;
    height: 100%;
    z-index: 1000;
    padding-bottom: 50px;
    overflow: scroll;
  }
  .value-block{
    background-color: #5c5c5c;
    margin: 0px 0px 10px 0px;
  }
  .value-block .el-form-item__label{
    color: #ddd !important;
  }
  .value-block .el-input__inner{
    background-color: #eee !important;
  }
  .file-box{
    width: 100%;
    height:100%;
    position: absolute;
    top: 0;
    left: 0;
    padding-top:5px;
    overflow: scroll;
  }
  .file-item{
    width: 20%;
    display: inline-block;
    text-align: center;
    cursor: pointer;
  }
  .file-item p{
    display: block;
    font-size: 12px;
    text-align: center;
    margin: 0;
    padding: 0;
  }
.el-dropdown{
  color:#fff;
}
</style>
